<template>
  <!-- 一级菜单 -->
  <a-layout-sider
    class="layout-sider-father"
    :width="menuFatherWidth"
    :style="backgroundStyle"
  >
    <div class="sider-logo">
      <img alt="logo" src="@/assets/logo.png" :width="32" />
    </div>
    <div class="father-content">
      <div class="father-plugin">
        <div class="menu-items-container">
          <div
            v-for="(item, index) in renderFatherMenu"
            :key="index"
            :class="{
              'father-item': true,
              'father-select': (item.path === fatherMenuActive) && !isDark,
              'father-select-dark': (item.path === fatherMenuActive) && isDark,
            }"
            @click="fatherMenuActiveChange(item.path)"
          >
            <div class="select-line"></div>
            <i class="iconfont">
              <!-- item.meta.icon ||  -->
              <component :is="'' + 'icon-settings'"></component>
            </i>
            <div class="name">{{ item.meta.locale }}</div>
          </div>
        </div>
      </div>
    </div>
  </a-layout-sider>
</template>
<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import { useAppStore } from '@/store';
  import useThemes from '@/hooks/themes';
  import { useRouter } from 'vue-router';
  import { openWindow, regexUrl } from '@/utils';
  const router = useRouter();
  const { isDark } = useThemes();
  const appStore = useAppStore();
  const menuFatherWidth = ref<number>(55);
  const renderFatherMenu = computed(() => appStore.appAsyncFatherMenu);
  /**
   * 当前选中的值
   * */
  const fatherMenuActive = computed(() => {
    const path = router.currentRoute.value.path;
    let activePath = path;
    if (path !== undefined && path.lastIndexOf('/') > 0) {
      const tmpPath = path.substring(1, path.length);
      activePath = '/' + tmpPath.substring(0, tmpPath.indexOf('/'));
    }
    // fatherMenuActiveChange(activePath);
    activeMenu(activePath);
    return activePath;
  });

  /**
   * 激活菜单
   */
  const activeMenu = (activePath: string) => {
    return appStore.activeMenu(activePath);
  };

  /**
   * 切换父菜单
   * */
  const fatherMenuActiveChange = (value: string) => {
    if (regexUrl.test(value)) {
      openWindow(value);
      return;
    }else{
      let routeInfo = activeMenu(value);
      router.push({name:routeInfo.name})
    }
  };

  /**
   * 一级菜单背景
   * */
  const backgroundStyle = computed(() => {
    const background = isDark.value
      ? 'var(--color-bg-3)'
      : 'linear-gradient(rgb(var(--primary-6)), rgb(var(--primary-5)))';
    return { background };
  });
</script>

<style scoped lang="less">
  .layout-sider-father {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    height: 100%;
    text-align: center;

    .sider-logo {
      color: var(--color-text-1);
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 32px;
      }
    }

    .father-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow-y: hidden;

      > :deep(.arco-layout-sider-children) {
        overflow-y: hidden;
      }

      .menu-items-container {
        display: flex;
        flex-direction: column;
        font-weight: 500;
        font-size: 12px;
        color: hsla(0, 0%, 100%, 0.6);
        letter-spacing: 0.4px;
        gap: 10px;
        padding-top: 10px;

        .father-item {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          height: 50px;
          justify-content: center;
          cursor: pointer;
          text-align: center;

          .name {
            width: 50px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-top: 5px;
          }

          .iconfont {
            font-size: 20px;
            height: 20px;
            width: 20px;

            .menu-item-name-icon {
              width: 20px;
              height: 20px;
            }
          }

          &:hover {
            background-color: rgba(250, 251, 250, 0.12);
          }

          &.father-select {
            font-weight: 800;
            color: #fff;
            background-color: #fafbfa1f;

            .select-line {
              height: 50px;
              width: 4px;
              background-color: #fff;
              border-radius: 0 100px 100px 0;
              position: absolute;
              left: 0;
              z-index: 1;
            }
          }

          &.father-select-dark{
            color: rgb(var(--primary-6));
            background-color: #fafbfa1f;
            font-weight: 800;

            .select-line {
              height: 50px;
              width: 4px;
              background-color: rgb(var(--primary-6));
              border-radius: 0 100px 100px 0;
              position: absolute;
              left: 0;
              z-index: 1;
            }
          }
        }
      }
    }
  }
</style>
